<template>
  <div class="bookPage">
    <div class="bread">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '#' }">书法教学</el-breadcrumb-item>
        <el-breadcrumb-item>教材教辅</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="books-container">
      <div class="book-card" v-for="(book,index) in bookList" :key="book.id">
        <router-link :to="{name:'bookDetail', query: {id:book.id}}" target="_blank">
          <div class="book-cover" :style="{ backgroundImage: `url(${book.bookCover})` }">
            <span class="book-category">{{ book.category }}</span>
          </div>
          <div class="book-info">
            <h3 class="book-title">{{ book.bookName }}</h3>
            <p class="book-author">编写单位: {{ book.compile }}</p>
            <p class="book-description">{{ book.introduction }}</p>
          </div>
        </router-link>
      </div>
    </div>
    <div class="page">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>

import { listBook } from '@/api/teach/book/book'
import ImageNonePreview from '@/components/ImagePreview/ImageNonePreview.vue'
import { cutString } from '@/utils/ruoyi'

export default {
  name: 'BookPage',
  components: { ImageNonePreview },
  data() {
    return {
      total: 0,
      bookList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 6,
        grade: '0'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    cutString,
    getList() {
      this.loading = true
      listBook(this.queryParams).then(response => {
        this.bookList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    reQuery() {
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

.bookPage {
  font-family: 'Roboto', sans-serif;

}

.books-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

.book-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.book-cover {
  margin-top: 10px;
  height: 300px;
  background-size: cover;
  background-position: center;
  position: relative;
}


.book-info {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.book-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #2c3e50;
  line-height: 1.3;
}

.book-author {
  color: #3498db;
  font-size: 1rem;
  margin-bottom: 15px;
  font-weight: 500;
}

.book-description {
  color: #7f8c8d;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.page {
  text-align: center;
  margin-top: 30px;

  ::v-deep .number.active {
    background-color: #337ab7 !important;
  }
}
</style>
